<template>
	<div class="home">
		<div class="index_top">
			<div class="index_top_right">
				<el-button v-if="!Token" class="login" type="success" icon="User" circle @click="loginClick">
					登录
				</el-button>
				<div class="user" v-if="Token">
					<el-dropdown class="avatar-container" trigger="hover">
						<div class="avatar-wrapper">
							<div class="hamburger-icon">
								<span></span>
								<span></span>
								<span></span>
							</div>
						</div>
						<template #dropdown>
							<el-dropdown-menu class="user-dropDown" slot="dropdown">
								<el-dropdown-item @click="menuHandler('center')" class="center">
									<span>个人中心</span>
								</el-dropdown-item>
								<el-dropdown-item @click="goToPersonalFile" class="personalfile">
									<span>个人档案</span>
								</el-dropdown-item>
								<el-dropdown-item @click="loginOut" class="loginOut">
									<span>退出登录</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
		</div>
		<el-scrollbar class="contain_view">
			<div class="rotation_view">
				<div
					v-for="(image, index) in bgImages"
					:key="index"
					class="bg-slide"
					:style="{ backgroundImage: `url(${image})`, opacity: index === bgIndex ? 1 : 0 }"
				></div>
				<div class="bg-mask"></div>
				<div class="bg-mask-top"></div>
				<div class="rotation_content-wrapper">
					<div class="main-title-row">
						<div class="main-title-group left">
							<div class="main-title-btn main-title-btn-large" @click="goToSection('公告')">公告</div>
							<div class="main-title-btn main-title-btn-large" @click="goToSection('项目信息')">项目信息</div>
						</div>
						<div class="main-title"
							 :class="{ 'main-title-clickable': !isHome }"
							 @click="goToHome"
						>
							创业灯塔-齐学创
						</div>
						<div class="main-title-group right">
							<div class="main-title-btn main-title-btn-large" @click="goToSection('项目成果')">项目成果</div>
							<div class="main-title-btn main-title-btn-large" @click="goToSection('导师')">导师</div>
						</div>
					</div>
				</div>
			</div>
			<router-view />
			<el-backtop :right="100" :bottom="100" />
			<div class="bottom_view">
				<img class="bottom_img" src="http://chy2.gdnxeco.com/20230912/0d5ae5e141c14b06a52a7c4c2f8ea4cf.jpg" alt="">
				<div class="bottom_company"></div>
				<div class="bottom_record"></div>
				<div class="bottom_desc"></div>
			</div>
		</el-scrollbar>
		<div :class="['sticky-header', { show: isSticky }]">
			<div class="sticky-header-inner">
				<div v-if="!isSticky" class="sticky-mask"></div>
				<div class="sticky-home-btn" @click="goToHome">返回首页</div>
				<div class="main-title-row sticky-row">
					<div class="main-title-group left">
						<div class="main-title-btn sticky-btn" @click="goToSection('公告')">公告</div>
						<div class="main-title-btn sticky-btn" @click="goToSection('项目信息')">项目信息</div>
					</div>
					<div class="main-title sticky-title"
						 :class="{ 'main-title-clickable': !isHome }"
						 @click="!isHome && goToHome()"
					>
						创业灯塔-齐学创
					</div>
					<div class="main-title-group right">
						<div class="main-title-btn sticky-btn" @click="goToSection('项目成果')">项目成果</div>
						<div class="main-title-btn sticky-btn" @click="goToSection('导师')">导师</div>
					</div>
				</div>
				<div v-if="Token" class="sticky-user-center-dropdown">
					<el-dropdown class="avatar-container" trigger="hover" :teleported="true">
						<div class="avatar-wrapper" style="color: #222;">
							<div class="hamburger-icon">
								<span style="background-color: #222;"></span>
								<span style="background-color: #222;"></span>
								<span style="background-color: #222;"></span>
							</div>
						</div>
						<template #dropdown>
							<el-dropdown-menu class="user-dropDown" slot="dropdown">
                                <el-dropdown-item @click="menuHandler('center')" class="center">
									<span>个人中心</span>
								</el-dropdown-item>
								<el-dropdown-item @click="menuHandler('center')" class="center">
									<span style="color: #222;">个人中心</span>
								</el-dropdown-item>
								<el-dropdown-item @click="goToPersonalFile" class="personalfile">
									<span style="color: #222;">个人档案</span>
								</el-dropdown-item>
								<el-dropdown-item @click="loginOut" class="loginOut">
									<span style="color: #222;">退出登录</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
                <div v-if="Token" class="sticky-personalfile-btn" @click="goToPersonalFile">个人档案</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import menu from '@/utils/menu'
	import axios from 'axios'
	import {
		ref,
		onBeforeUnmount,
		getCurrentInstance,
		nextTick,
		computed,
		watch,
		onMounted,
	} from 'vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		useStore
	} from 'vuex';
	const store = useStore()
	const router = useRouter()
	const route = useRoute();
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const Token = ref('')
	const date = ref('')
	const timer = ref('')
	const interval = ref(null)
	const bgImages = ['/2.png', '/3.png', '/4.png'];
	const bgIndex = ref(0);
	let bgTimer = null;
	const isSticky = ref(false);

	const handleScroll = () => {
		const maskTop = document.querySelector('.bg-mask-top');
		if (!maskTop) return;
		const rect = maskTop.getBoundingClientRect();
		isSticky.value = rect.bottom <= 0;
	};

	if(localStorage.getItem('frontToken') && !store.getters['user/session'].id){
		store.dispatch('user/getSession')
	}
    // 获取默认菜单index
    const setMenuIndex = ()=>{
        menuIndex.value = ''
        nextTick(()=>{
            menuIndex.value = context?.$toolUtil.storageGet('menuIndex')?context?.$toolUtil.storageGet('menuIndex'): '0'
        })
    }
    // 默认菜单index
    const menuIndex = ref('0')
    watch(() => router.currentRoute.value,() => {
        Token.value = context?.$toolUtil.storageGet('frontToken')
        setMenuIndex()
    },{
        immediate:true
    })
    const init = () => {
        // 获取菜单
        getMenu()
        // 赋值token
        Token.value = context?.$toolUtil.storageGet('frontToken')
        // 时间
        interval.value = setInterval(() => {
            date.value = context?.$toolUtil.getCurDate()
            timer.value = context?.$toolUtil.getCurDateTime().split(' ')[1]
        }, 1000)
        if(Token.value){
            getSession()
        }
    }
    // 切换菜单保存index
    const menuChange = (e)=>{
        if(e=='chat')return
        context?.$toolUtil.storageSet('menuIndex',e)
    }

    const goToSection = (name) => {
        let path = '';
        if (name === '公告') path = '/index/newsList';
        if (name === '项目信息') path = '/index/xiangmuxinxiList';
        if (name === '项目成果') path = '/index/xiangmuchengguoList';
        if (name === '导师') path = '/index/daoshiList';
        if (path) {
            router.push(path);
        }
    }

    // 轮播图跳转
    const carouselClick = (url)=>{
        if (url) {
            if (url.startsWith('http')) {
                window.open(url)
            } else {
                context.$router.push(url)
            }
        }
    }
    const menuList = ref([])
    const role = ref('')
    const getMenu = () => {
        let params = {
            page: 1,
            limit: 1,
            sort: 'id',
        }
        context?.$http({
            url: "menu/list",
            method: "get",
            params: params
        }).then(res => {
            context?.$toolUtil.storageSet("menus", res.data.data.list[0].menujson);
        })
        menuList.value = context?.$config.menuList
    }
    const loginClick = () => {
        context?.$toolUtil.storageSet('toPath',window.history.state.current)
        router.push('/login')
    }
    const loginOut = () => {
        context?.$toolUtil.message('退出成功', 'success')
        context?.$toolUtil.storageClear()
        router.replace('/index/home')
        context?.$toolUtil.storageSet('menuIndex','0')
        Token.value = ''
    }
    
    // 跳转到主页
    const goToHome = () => {
        router.push('/index/home')
        context?.$toolUtil.storageSet('menuIndex','0')
    }
    
    // 跳转到个人档案
    const goToPersonalFile = () => {
        router.push('/index/pingdingdengjiList?centerType=1')
    }
    
    // 菜单跳转
    const menuHandler = (name) => {
        if (name == 'center') {
            name = `${context?.$toolUtil.storageGet('frontSessionTable')}Center`
            menuChange('center')
        }
        router.push(name)
    }
    // 获取用户信息
    const getSession = () =>{
        context?.$http({
            url: `${context?.$toolUtil.storageGet('frontSessionTable')}/session`,
            method:'get'
        }).then(res=>{
            context?.$toolUtil.storageSet('userid',res.data.data.id)
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'chuangyezhe'){
                context?.$toolUtil.storageSet("frontName", res.data.data.xuehao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'chuangyezhe'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'daoshi'){
                context?.$toolUtil.storageSet("frontName", res.data.data.daoshigonghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'daoshi'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'fuzeren'){
                context?.$toolUtil.storageSet("frontName", res.data.data.fuzerenzhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'fuzeren'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'shijiguanliyuan'){
                context?.$toolUtil.storageSet("frontName", res.data.data.shijizhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'shijiguanliyuan'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'qujiguanliyuan'){
                context?.$toolUtil.storageSet("frontName", res.data.data.qujizhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'qujiguanliyuan'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'jiedaoguanliyuan'){
                context?.$toolUtil.storageSet("frontName", res.data.data.jiedaozhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'jiedaoguanliyuan'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'xuexiaoguanliyuan'){
                context?.$toolUtil.storageSet("frontName", res.data.data.xuexiaozhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'xuexiaoguanliyuan'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'xueyuanguanliyuan'){
                context?.$toolUtil.storageSet("frontName", res.data.data.xueyuanzhanghao)
            }
            if(context?.$toolUtil.storageGet('frontSessionTable') == 'xueyuanguanliyuan'){
                context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
            }
        })
    }
    init()

	onMounted(() => {
		bgTimer = setInterval(() => {
			bgIndex.value = (bgIndex.value + 1) % bgImages.length;
		}, 4000); // 4秒切换一次
		window.addEventListener('scroll', handleScroll);
	});
	onBeforeUnmount(() => {
		if (bgTimer) clearInterval(bgTimer);
		window.removeEventListener('scroll', handleScroll);
	});

	const isHome = computed(() => {
	  return route.path === '/index/home' || route.path === '/';
	});

	const goToPersonalCenter = () => {
		router.push('/index/pingdingdengjiList?centerType=1');
	};
</script>
<style lang="scss" scoped>
	/* 头部 */
	.index_top {
		.index_top_title {
		}
		.index_top_right {
			.weather_time_view {
				.weather {
					.city {
					}
					.wea {
					}
				}
				.time {
					.date {
					}
					.timer {
					}
				}
			}
		}
		// 登录按钮
		:deep(.el-button--success) {
		}
		:deep(.el-button--success:hover) {
		}
		// 登出按钮
		:deep(.el-button--danger) {
		}
		:deep(.el-button--danger:hover) {
		}
	}
	// 轮播盒子
	.rotation_view {
	}
	// 底部
	.bottom_view {
		// 图片
		.bottom_img {
			display: none;
		}
		// 公司
		.bottom_company {
		}
		// 备案号
		.bottom_record {
		}
		// 联系方式
		.bottom_desc {
		}
	}
	
	
	

	.contain_view {
		padding: 0px 0 0;
	}
	.el-aside {
		transition: width 0.15s;
		-webkit-transition: width 0.15s;
		-moz-transition: width 0.15s;
		-webkit-transition: width 0.15s;
		-o-transition: width 0.15s;
	}
	.el-sub-menu__hide-arrow{
		display: block !important;
	}
	.menu_scrollbar {
	}
	// 总盒子
	.menu_view {
		// 一级菜单
		:deep(.first-item) {

			// 图标
			.iconfont {
			}
		
			// 标题
			.el-sub-menu__title,
			span {
			}
		
			//箭头
			.el-sub-menu__icon-arrow {
			}
		}
		// 选中
		:deep(.is-active) {
		}
		
		// 悬浮
		:deep(.first-item:hover) {
		}
	}
</style>
<style lang="scss">
	// 二级
	.menu_popper {
		border:none !important;
		background: none !important;

		// 二级总盒子
		.el-menu--popup {
		}

		// 二级菜单
		.second-item {
		}
		
		// 选中
		.is-active {
		}
		
		// 悬浮
		.second-item:hover {
		}
	}
</style>
<style>

.index_top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    z-index: 1002;
    position: fixed;
    border-bottom: 0px solid #edeef0;
    
    
    
    overflow: hidden;
}

.index_top .index_top_title{
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    order: 0;
    text-align: center;
    line-height: 60px;
    
    
    
    transition: color 0.3s ease;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.index_top .index_top_title:hover{
    color: var(--theme);
}


.index_top .index_top_right{
    display: flex;
    align-items: center;
    column-gap: 20px;
    justify-content: flex-end;
    
    flex: 1;
    height: 60px;
    padding: 0 30px;
    
    color: #fff;
}

.index_top .notice-btn{
    
    font-size: 14px;
    border-radius: 0;
    color: #000;
    order: 1;
    border: none;
    height: 26px;
    border-radius: 4px;
    padding: 0 10px;
    height: 36px;
    border-radius: 0;
}
.index_top .notice-btn:hover{
    color: var(--theme);
}

.index_top .notice-btn .iconfont{
    font-size: 16px;
}


.index_top .index_top_right .chat{
    
    order: 3;
    padding: 0 10px;
    line-height: 36px;
}
.index_top .index_top_right .chat:hover{
    color: var(--theme);
    background: #fff;
}
.index_top .index_top_right .chat .iconfont{
    font-size: 16px;
}
.index_top .index_top_right .chat span{
    font-size: 14px;
}

.index_top .index_top_right .cart{
    font-size: 14px;
    
    order: 2;
    padding: 0 10px;
    line-height: 36px;
}
.index_top .index_top_right .cart:hover{
    color: var(--theme);
    background: #fff;
}
.index_top .index_top_right .cart .iconfont{
    font-size: 16px;
    margin-right:5px;
}


.index_top .user .avatar-wrapper{
    display: flex;
    align-items: center;
    cursor:pointer;
    color: #fff;
}

.index_top .user .avatar-wrapper .user-avatar{
    width: 36px !important;
    height: 36px;
    border-radius: 100%;
    margin-right:5px;
}

.index_top .user .avatar-wrapper .nickname{
    font-size: 16px;
    margin-right:5px;
    color: #fff;
}

.index_top .user .avatar-wrapper .el-icon-arrow-down{
}


.hamburger-icon {
	width: 30px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
}

.hamburger-icon span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 2px;
}

.index_top .user-dropDown{
    padding: 10px 0;
    margin: 5px 0;
    background: #fff;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.index_top .user-dropDown li{
    padding: 0 20px !important;
    line-height: 36px !important;
    font-size: 14px !important;
    color: #fff !important;
}
.index_top .user-dropDown li:hover{
    color: #fff !important;
    background: var(--theme) !important;
}

.index_top .weather_time_view {
    order: 0;
    display: flex;
    align-items: center;
    line-height: 20px;
    font-size: 14px;
    column-gap: 10px;
    
}

.index_top .login {
    order: 5;
    color: #fff;
}

.index_top .user {
    order: 5;
    position: absolute;
    bottom: 10px;
    right: 40px;
}

.index_top .weather {
    display: flex;
    align-items: center;
}

.index_top .time {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.index_top .login {
    background: var(--theme);
    width: 80px;
    border: none;
    height: 26px;
    border-radius: 4px;
    padding: 0 4px;
    padding: 0 10px;
    height: 36px;
    border-radius: 6px;
}

.index_top .toBack button {
    background: var(--theme);
    color: #fff;
    border-radius: 0;
    border: 0;
    padding: 0 10px;
    height: 36px;
    border-radius: 6px;
}

.index_top .toBack {
    order: 4;
}
.index_top button.el-button:hover,.index_top button.el-button:focus {
    background: #fff;
    border-color: var(--theme);
    color: var(--theme);
}

.menu-wrapper {
    order: 3;
    width: 100%;
}
.bottom_view {
    width: 100%;
    background: var(--theme);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 70px 0px;
    border-width: 0px 0px 0px;
    border-style: solid;
    border-color: rgb(254, 176, 67);
    font-size: 16px;
    color: rgb(51, 51, 51);
    line-height: 1.8;
}

.menu-wrapper {
    text-align: center;
    padding: 0 250px;
    background: var(--theme1);
}

.menu-wrapper .menu_view {
    display: flex;
    justify-content: center;
    background: none;
    border-bottom: none;
    align-items: center;
    padding: 0;
    background: var(--theme1);
}

.menu-wrapper .first-item {
    color: #fff!important;
    
}

.menu-wrapper .el-sub-menu__title {
    color: inherit!important;
    border-bottom: none!important;
    height: 60px!important;
    line-height: 60px!important;
    
}

.menu-wrapper .el-sub-menu__title>* {
    color: inherit!important;
}

.menu-wrapper .first-item>i {
    color: inherit;
}

.menu-wrapper .el-menu .first-item.is-active {
    color: var(--theme1)!important;
    border-bottom: none!important;
    background: var(--theme)!important;
}
.menu-wrapper .first-item:hover {
    background: #fff!important;
    color: var(--theme)!important;
    line-height: 60px;
    height: 60px;
}
.menu-wrapper .el-menu-item.second-item.is-active {
    color: var(--theme)!important;
    background: #fff;
}

.menu-wrapper .second-item:hover {
    background: #fff!important;
    color: #333!important;
}

.menu_view>.first-item {
    line-height: 60px;
    height: 60px;
}

.second-item.is-active {
    color:var(--theme)!important;
}
.second-item:hover {
    color:var(--theme)!important;
    background: var(--theme-light)!important;
}

.rotation_view {
	position: relative;
	width: 100%;
	height: 900px;
	overflow: hidden;
}

.bg-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: opacity 1.5s ease-in-out;
	z-index: 1;
}

.bg-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
	z-index: 2;
	pointer-events: none;
}

.bg-mask-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 100%) !important;
	z-index: 3;
	pointer-events: none;
}

.rotation_content-wrapper {
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	padding-top: 60px;
	justify-content: center;
}

.breadcrumb-wrapper .bread_view {
    width:100%;
    background: none;
    color: rgb(51, 51, 51);
    text-align:center;
    font-size:20px;
    font-weight:600;
    border:0px solid #eee;
    padding:10px 0px 10px 0px;
    background: #fff;
}

.breadcrumb-wrapper .bread_view .el-breadcrumb{
    font-size: 16px;
    line-height: 1;
}

.breadcrumb-wrapper .bread_view .el-breadcrumb .el-breadcrumb__separator{
    margin: 0px 9px;
    font-weight: 500;
    color: #000;
}

.breadcrumb-wrapper .bread_view .el-breadcrumb .first_breadcrumb span a{
    color: #000;
    display: inline-block;
    background: #fff;
    min-width: 100px;
    font-size: 14px;
}

.breadcrumb-wrapper .bread_view .el-breadcrumb .second_breadcrumb .el-breadcrumb__inner{
    color: #fff;
    display: inline-block;
    min-width: 100px;
    font-size: 14px;
    background: var(--theme);
}


.breadcrumb-wrapper .bread_view {
    width: 100vw;
    padding: 0 calc(50vw - 600px);
    position: relative;
    left: calc(-50vw + 600px);
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    background: var(--theme1);
    
}

.breadcrumb-wrapper .back_view {
    padding: 10px 0;
}
.breadcrumb-wrapper .back_btn{
    background: var(--theme);
    border: none;
    color:#fff;
}
.breadcrumb-wrapper .back_btn:hover {
    background: var(--theme);
    color:#fff;
}

.breadcrumb-wrapper .bread_view .el-breadcrumb span {
    line-height: 40px;
}
.main-title {
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-shadow: 4px 4px 12px rgba(0,0,0,0.5);
    letter-spacing: 2px;
    line-height: 1.1;
    min-width: 420px;
    cursor: pointer;
}
.main-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 80px;
  position: relative;
}
.main-title-group {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
.main-title-btn {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  background: transparent;
  border: none;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.main-title-btn:hover {
  transform: scale(1.1);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.main-title-btn.main-title-btn-large {
  font-size: 30px;
  font-weight: 600;
}

.rotation_view::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.4);
}
.sticky-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9999;
  pointer-events: none;
  background: hsl(220, 80%, 25%);
  border-radius: 0;
}
.sticky-header.show {
  display: block;
  pointer-events: auto;
}
.sticky-header-inner {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-radius: 0;
  margin-top: 16px;
  width: 100vw;
  max-width: none;
  padding: 18px 40px 10px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
}
.sticky-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 1;
  pointer-events: none;
}
.sticky-row {
  gap: 120px;
  position: relative;
  z-index: 2;
}
.sticky-title {
  color: #222 !important;
  text-shadow: none !important;
}
.sticky-btn {
  color: #222 !important;
  text-shadow: none !important;
}
.sticky-home-btn {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme, #ff9800);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.sticky-home-btn:hover {
  background: #ffa726;
}
.sticky-user-center-dropdown {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.sticky-user-center-dropdown .avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #222;
}
.sticky-user-center-dropdown .hamburger-icon span {
  background-color: #222;
}
.sticky-personalfile-btn {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme, #ff9800);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.sticky-personalfile-btn:hover {
  background: #ffa726;
}
</style>